<script setup lang="ts">
	import { ref, useAttrs, inject, unref, computed, watch } from 'vue'
	import searchCombox from './searchCombox.vue'
	import { onShow } from '@dcloudio/uni-app'

	const emit = defineEmits(['close', 'submit'])
	const attrs = useAttrs()
	const remarkList = ref([
		{
			id: 0,
			name: '无'
		},
		{
			id: 1,
			name: '促销'
		},
		{
			id: 2,
			name: '其他'
		}
	])
	const remarkData = ref([
		{
			id: 0,
			name: '无'
		},
		{
			id: 1,
			name: '满赠'
		},
		{
			id: 2,
			name: '陈列'
		},
		{
			id: 3,
			name: '搭赠'
		},
		{
			id: 3,
			name: '其他'
		}
	])


	const goodsInfo = inject('currentGoods') as any

	// const parseCartDesc = (cartDesc, unit) => {
	// 	// 将字符串分割成单个项
	// 	const items = cartDesc.split(',');
	// 	let count = 0; // 正常数量
	// 	let num = 0; // 赠送数量

	// 	// 遍历每个项
	// 	items.forEach(item => {
	// 		// 去除空格并检查是否包含指定单位
	// 		const trimmedItem = item.trim();
	// 		if (trimmedItem.includes(unit)) {
	// 			// 检查是否是赠送的数量
	// 			if (trimmedItem.startsWith('赠')) {
	// 				num += parseInt(trimmedItem.replace(unit, '').replace('赠', ''), 10);
	// 			} else {
	// 				count += parseInt(trimmedItem.replace(unit, '').replace(',', ''), '', 10);
	// 			}
	// 		}
	// 	});

	// 	return { count, num };
	// };


	watch(
		() => goodsInfo.value,
		(val) => {
      console.log(val)
			formData.value = val.spec.map((res) => {
				// const { count, num } = parseCartDesc(val.cart_desc, res.unit);
				return {
					...res,
					id: res.id,
					sale_price: res.sale_price,
					// count: count.toString(),
					count: '',
					unit: res.unit,
					remark: res.remark,
					// num: num,
					num: '',
					total: 0
				}
			}).sort((a, b) => {
        const order = { 3: 0, 2: 1, 1: 2 }; // 定义期望的顺序
        return order[a.unit_type] - order[b.unit_type];
      });
		},
		{
			deep: true
		}
	)
	const formData = ref([
		{
			id: '',
			sale_price: 0,
			count: '',
			remark: '',
			unit: '',
			num: ''
		}
	])
	const remarked = ref('')

	const change = (e, item) => {
		item.total = Number(item.sale_price) * Number(e)
	};
	const changess = (e, item) => {
		item.total = Number(e) * Number(item.count)
	};
	const handelSelect = (e, item) => {
		item.remark = e
	}

	const addTo = () => {
		const filteredItems = formData.value.filter(item => Number(item.count) > 0);
		const data1 = filteredItems.map((res) => {
			return {
				goods_id: res.goods_id,
				goods_spec_id: res.id,
				unit: res.unit,
				goods_type: 1,
				true_price: res.sale_price,
				sale_price: res.sale_price,
				total_price: Number(res.sale_price) * Number(res.count),
				num: res.count,
				remark: res.remark
			}
		})
		remarked.value = ''
		emit('submit', unref(data1))
	}
</script>
<template>
	<up-popup v-bind="attrs" @close="emit('close')" closeable :round="10">
		<view class="content">
			<view class="goods_info_wrap">
				<view class="goods_img">
					<image :src="goodsInfo?.img || ''" style="width: 160rpx;height: 160rpx;"></image>
				</view>
				<view class="goods_info">
					<view class="info-name">{{goodsInfo?.goods_name}}</view>
					<view class="info-bord">规格：
						<text v-for="(item, index) in goodsInfo?.spec" :key="item.id" style="color: rgba(2, 14, 36, 1);">
							{{item.unit_name + '，'}}
						</text>
					</view>
					<view class="info-bord">售价：<text v-for="(item, index) in goodsInfo?.spec" :key="item.id"
							style="color: rgba(245, 99, 81, 1);">{{item.sale_price + '，'}}</text>
					</view>
				</view>
			</view>
			<view class="list">
				<up-row justify="space-between" gutter="10">
					<up-col span="2">
						<up-text text="数量" color="rgba(109, 108, 112, 1)"></up-text>
					</up-col>
					<up-col span="3">
						<up-text text="单价" color="rgba(109, 108, 112, 1)"></up-text>
					</up-col>
					<up-col span="2">
						<up-text text="小计" color="rgba(109, 108, 112, 1)"></up-text>
					</up-col>
					<up-col span="2">
						<up-text text="规格" color="rgba(109, 108, 112, 1)"></up-text>
					</up-col>
					<up-col span="2">
						<up-text text="库存" color="rgba(109, 108, 112, 1)"></up-text>
					</up-col>
					<up-col span="2">
						<up-text text="备注" color="rgba(109, 108, 112, 1)"></up-text>
					</up-col>
				</up-row>
				<block v-for="(item, index) in formData" :key="index">
					<up-row justify="space-between" gutter="10">
						<up-col span="2">
							<up-input v-model="item.count" :customStyle="{backgroundColor: '#f0f0f0'}" placeholder=""
								border="none" :suffixIcon="item.unit"
								suffixIconStyle="color:rgba(109, 108, 112, 1);font-size: 28rpx;"
								@change="change($event,item)"></up-input>
						</up-col>
						<up-col span="3">
							<up-input v-model="item.sale_price" :customStyle="{backgroundColor: '#f0f0f0'}"
								placeholder="" border="none" prefixIcon="￥"
								prefixIconStyle="font-size: 15px;color: rgba(245, 99, 81, 1)"
								color="rgba(245, 99, 81, 1)" @change="changess($event,item)"></up-input>
						</up-col>
						<up-col span="2">
							<up-text :text="item.total" mode="price" align="left" size="10"></up-text>
						</up-col>
						<up-col span="2">
							<up-text :text="item.unit_name" align="left" size="10"></up-text>
						</up-col>
						<up-col span="2">
							<up-text :text="item.stock_num" align="left" size="10"></up-text>
						</up-col>
						<up-col span="2">
							<up-input v-model="item.remark" :customStyle="{backgroundColor: '#f0f0f0'}" placeholder="备注"
								border="none"></up-input>
						</up-col>
					</up-row>
				</block>
			</view>
			<view class="line"></view>
			<!-- <view>
				<up-row justify="space-between" gutter="5">
					<up-col span="1.5">
						<up-text text="赠品" align="left"></up-text>
					</up-col>
					<up-col span="3" v-for="(item, index) in formData" :key="index">
						<up-input v-model="item.num" :customStyle="{backgroundColor: '#f0f0f0'}" placeholder=""
							border="none" :suffixIcon="item.unit"
							suffixIconStyle="color:rgba(109, 108, 112, 1);font-size: 28rpx;"></up-input>
					</up-col>
					<up-col span="3">
						<up-input v-model="remarked" :customStyle="{backgroundColor: '#f0f0f0'}" placeholder="备注"
							border="none"></up-input>
					</up-col>
				</up-row>
			</view> -->
			<view class="form_wrap">
				<view class="submit_btn" @tap="addTo()">
					<text style="margin-left: 20rpx;">提交</text>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<style lang="scss" scoped>
	.minus {
		width: 44rpx;
		height: 44rpx;
		background-color: #C8C8C8;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.plus {
		width: 44rpx;
		height: 44rpx;
		background-color: #806AF7;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.content {
		width: 100%;
		// height: 80vh;
		padding: 32rpx 28rpx;
		box-sizing: border-box;

		.goods_info_wrap {
			display: flex;
			width: 100%;
			font-size: 28rpx;
			font-weight: 500;
			padding-bottom: 28rpx;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

			.goods_img {
				width: 160rpx;
				height: 160rpx;
				margin-right: 20rpx;
			}

			.goods_info {
				color: #9C9AA1;

				.info-name {
					font-size: 28rpx;
					font-weight: 700;
					color: rgba(39, 38, 41, 1);
				}

				.info-bord {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(109, 108, 112, 1);
					margin-top: 20rpx;
				}

			}


		}

		.list {
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			margin: 20rpx 0rpx;
		}

		.line {
			width: 702rpx;
			height: 0rpx;
			border: 2rpx dashed rgba(0, 0, 0, 0.1);
			margin: 40rpx 0rpx;
		}

		.form_wrap {
			width: 100%;

			.submit_btn {
				width: 100%;
				height: 100rpx;
				border-radius: 52rpx;
				background: #3783FC;
				margin-top: 58rpx;
				display: flex;
				justify-content: center;
				line-height: 100rpx;
				font-size: 32rpx;
				font-weight: 700;
				color: rgba(255, 255, 255, 1);
			}
		}
	}
</style>